<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test TextBox Validation Widgets</title>
		<link rel="stylesheet" id="themeStyles" href="http://group2.tianji.com/dijit/themes/tundra/tundra.css">
		<style type="text/css">
			body .small {
				width: 3em;
			}
			body .medium {
				width: 10em;
			}
			body .long {
				width: 20em;
			}
			body .verylong {
				width: 90%;
				height:50px;
			}

			.noticeMessage {
				color:#093669;
				font-size:0.95em;
				margin-left:0.5em;
			}

			.dojoTitlePaneLabel label {
				font-weight:bold;
			}
		</style>
		
		<script src="http://leoner.tianji.com/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
		<script type="text/javascript">
		
			dojo.require("dojo.parser");	// find widgets
			dojo.require("dijit.form.ValidationTextBox");
			dojo.require("dijit.form.Textarea");
			dojo.require("dojo.fx");
			dojo.addOnLoad(
				function(){
					var box = dojo.byId("node1");
					var box2 = dojo.byId("node2");
					var easing = function(x) { return x; };
					dojo.connect(box, "onclick", function(evt) {
						
						var a1 = dojo.fx.slideTo({
							node:box,
							easing : easing,
							duration : 1000,
							top : "150",
							left : "300"
						});
						var a2 = dojo.fx.slideTo({
							node:box,
							easing : easing,
							duration : 400,
							top : "20",
							left : "350"
						});
						var a3 = dojo.fx.slideTo({
							node:box,
							easing : easing,
							duration : 800,
							top : "350",
							left : "400"
						});
						var c2 = dojo.fx.chain([a1,a2,a3]);
						var a4 = dojo.fadeOut({
							node:box,
							easing:easing,
							duration:1000
						});
						var a5 = dojo.fadeIn({
							node:box,
							easing:easing,
							duration:1000
						});
						var a6 = dojo.fadeOut({
							node:box,
							easing:easing,
							duration:1000
						});
						var c1 = dojo.fx.chain([a4,a5,a6]);
						dojo.fx.combine([c1,c2]).play();
					});
					dojo.connect(box2, "onclick", function(evt) {
						var a1 = dojo.fx.slideTo({
							node:box2,
							easing:easing,
							duration:1000,
							top:"100",
							left:"300"
						});
						var a2 = dojo.fadeOut({
							node:box2,
							easing:easing,
							duration:1000
						});
						dojo.fx.combine([a1,a2]).play();
					});
					
					var box3 = dojo.byId("node3");
					var t = new dojo.fx.Toggler({
							node : box3,
							showDuration : 1000,
							hideDuration : 1000
					});
					var visible = true;
					dojo.connect(box3,"onclick",function(evt){
						if (visible)
							t.hide();
						else
							t.show( );
						visible = !visible;
					});
					
				}
			);

		</script>
	</head>
	<body class="tundra">
			<div class="testExample">
				<textarea rows="4" cols="" id="newComment" name="occupation"  style="font-size:15pt;" dojoType="dijit.form.ValidationTextBox"
				lowercase="true"
					required="true"
					promptMessage="Enter an occupation"></textarea>
				
			</div>
	<div name="simpleTextArea" dojoType="dijit.form.Textarea" id="simple" style="width:490px;height:72px;border:1px solid black;font-size:10pt;"
         		onChange="console.log('change-->'+arguments[0])"
         		onFocus="console.log('user focus handler')"
         		onBlur="console.log('user blur handler')"
			></div>
			<div>
				<div id="node1" style="width:200px;height:200px;background:yellow"></div>
			<div>
				<div id="node2" style="width:200px;height:200px;background:blue;top:500px"></div>
			</div>
			<div>
				<div id="node3" style="width:200px;height:200px;background:black;top:500px"></div>
			</div>
	</body>
</html>
